<script>
export default {
  name: "index",
  data() {
    return {
      detail: {},
      goods_id: ''
    }
  },
  computed: {
    swiperList() {
      if (!this.detail.swiper_url)  return []
      let list = this.detail.swiper_url.split(',').filter(item => item)
      return list.map(item => {
        // 判断结尾是不是视频
        return {
          url: item,
          type: item.includes('.mp4') ? 'video' : 'image'
        }
      })
    }
  },
  onLoad({ id }) {
    this.goods_id = id
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$api.getProductInfo({
        id: this.goods_id
      }).then(res => {
         this.detail = {
          ...res,
         }
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

<template>
  <div>
    <div class="back-icon" @click="toBack" style="position: fixed;left: 20px;top: 20px;z-index: 2">
      <u-icon name="arrow-left" size="28" color="#fff"></u-icon>
    </div>
    <div class="detail-image">
      <view class="screen-swiper-box">
        <swiper
            height="750rpx"
            style="height: 750rpx"
            indicator-dots="true"
            circular="true" :autoplay="false">
          <swiper-item v-for="item in swiperList">
            <video style="height: 750rpx;width: 100%" v-if="item.type === 'video'" id="myVideo" :src="item.url" controls></video>
            <u-image v-else :src="item.url" height="750rpx" mode="aspectFit"></u-image>
          </swiper-item>
        </swiper>
      </view>
    </div>
    <u-line ></u-line>
    <div class="detail-box">
      <view style="display: flex;align-items: center;justify-content: space-between">
        <view class="demo-price">
          {{ detail.name}}
        </view>
      </view>
      <view style="display: flex;align-items: center;justify-content: space-between">
        <view class="demo-count">
          商品编号：{{ detail.code}}
        </view>
      </view>
      <view>

      </view>
      <u-gap height="20"></u-gap>
      <u-line ></u-line>
      <u-gap height="20"></u-gap>
      <u-section :font-size="36" line-color="#ed2020" :show-line="true" title="商品介绍" :right="false"></u-section>
      <u-gap height="20"></u-gap>
      <u-line ></u-line>
    </div>

    <div style="padding: 0 20rpx">
      <u-parse :html="detail.content"></u-parse>
    </div>
  </div>
</template>

<style scoped lang="scss">
.goods-action {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 120rpx;
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  color: #FFFFFF;
  .goods-icon {
    position: relative;
    font-size: 28rpx;
    color: #646566;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    img {
      height: 36rpx;
      margin: 0 auto 2px;
    }
  }
  .goods-btn1 {
    width: 100%;
    margin-left: 5px;
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    background: linear-gradient(to right, #ffd01e, #ff8917);
  }
  .goods-btn2 {
    width: 100%;
    margin-right: 5px;
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    background: linear-gradient(to right, #ff6034, #ee0a24);
  }
  .goods-btn3 {
    width: 100%;
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-radius: 999px;
    background: #999999;
    box-sizing: border-box;
    margin: 0 20px;
  }

}
.detail-image {
  background-color: #ffffff;
}
.detail-box {
  padding: 20rpx;
  background-color: #ffffff;
}
.demo-title {
  font-size: 30rpx;
  margin-top: 5px;
  color: $u-main-color;
  margin-bottom: 10px;
}

.demo-tag {
  display: flex;
  margin-top: 5px;
}

.demo-tag-owner {
  background-color: $u-type-error;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 10rpx 14rpx;
  border-radius: 50rpx;
  font-size: 24rpx;
  line-height: 1;
}

.demo-tag-text {
  border: 1px solid $u-type-primary;
  color: $u-type-primary;
  margin-left: 10px;
  border-radius: 50rpx;
  line-height: 1;
  padding: 4rpx 14rpx;
  display: flex;
  align-items: center;
  border-radius: 50rpx;
  font-size: 20rpx;
}

.demo-price {
  font-size: 32rpx;
  color: #333333;
  margin-top: 5px;
}
.demo-count {
  font-size: 24rpx;
  color: $u-type-info;
  margin-top: 5px;
}

</style>
